<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密度分析</title>
    <script type="text/javascript" include="jquery,bootstrap,loader" src="../js/include-web.js"></script>
    <style>
        body, #map {
            position: absolute;
            width: 100%;
            height: 100%
        }

        .panel-default {
            width: 300px;
            float: right;
            margin: 15px 15px 0 0;
            position: relative;
        }

        .input-group {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div class='panel panel-default'>
    <div class='panel-heading'>
        <h3 class='panel-title'>密度分析</h3>
    </div>
    <div class='panel-body'>
        <div class='input-group'>
      <span class='input-group-addon'>输入数据
      <span title='必填字段' style='color: red;'>*</span> 　</span>
            <input id='datasetName' type='text' class='form-control'
                   value='samples_newyork_taxi_2013-01_14k'/></div>
        <div class='input-group'>
        <span class='input-group-addon'>分析方法
        <span title='必填字段' style='color: red;'>*</span> 　</span>
            <div>
                <select class='form-control' id='method' name='clientType'>
                    <option value='0' selected='selected'>简单点密度分析</option>
                    <option value='1'>核密度分析</option>
                </select>
            </div>
        </div>
        <div class='input-group'>
      <span class='input-group-addon'>网格面类型
      <span title='必填字段' style='color: red;'>*</span></span>
            <select class='form-control' id='meshType' name='clientType'>
                <option value='0' selected='selected'>四边形网格</option>
                <option value='1'>六边形网格</option>
            </select></div>
        <div class='input-group'>
            <span class='input-group-addon'>权重值字段　</span>
            <input id='fields' type='text' class='form-control' value='col7,col8'/></div>
        <div class='input-group'>
            <span class='input-group-addon'>分析范围　　</span>
            <input id='query' type='text' class='form-control' value='-74.150, 40.550, -73.750, 40.950'/></div>
        <div class='input-group'>
      <span class='input-group-addon'>网格大小
      <span title='必填字段' style='color: red;'>*</span> 　</span>
            <input id='resolution' type='text' class='form-control' value='80'/></div>
        <div class='input-group'>
            <span class='input-group-addon'>网格大小单位</span>
            <select class='form-control' id='meshSizeUnit' name='clientType'>
                <option value='Meter' selected='selected'>Meter</option>
                <option value='Kilometer'>Kilometer</option>
                <option value='Yard'>Yard</option>
                <option value='Foot'>Foot</option>
                <option value='Mile'>Mile</option>
            </select></div>
        <div class='input-group'>
      <span class='input-group-addon'>搜索半径
      <span title='必填字段' style='color: red;'>*</span> 　</span>
            <input id='radius' type='text' class='form-control' value='300'/></div>
        <div class='input-group'>
            <span class='input-group-addon'>搜索半径单位</span>
            <select class='form-control' id='radiusUnit' name='clientType'>
                <option value='Meter' selected='selected'>Meter</option>
                <option value='Kilometer'>Kilometer</option>
                <option value='Yard'>Yard</option>
                <option value='Foot'>Foot</option>
                <option value='Mile'>Mile</option>
            </select></div>
        <div class='input-group'>
            <span class='input-group-addon'>面积单位　　</span>
            <select class='form-control' id='areaUnit' name='clientType'>
                <option value='SquareMeter'>SquareMeter</option>
                <option value='Hectare'>Hectare</option>
                <option value='Are'>Are</option>
                <option value='Acre'>Acre</option>
                <option value='SquareFoot'>SquareFoot</option>
                <option value='SquareYard'>SquareYard</option>
                <option value='SquareMile' selected='selected'>SquareMile</option>
            </select></div>
        <div align='right'>
            <input type='button' id='btn' class='btn btn-primary' value='创建'/>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../dist/include-mapboxgl.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://117.122.248.69:8090";

    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        "| Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> " +
        " with <span>© <a href='http://iclient.supermapol.com' target='_blank'>SuperMap iClient</a></span>",

        processingUrl = host + "/iserver/services/distributedanalyst/rest/v1/jobs",
        token = 'yurnlSeWak-vh77nAh73yrW_cHDTDJrfZxCVl7-h3GhMSMSNTPjvH7ykQviXfH1tOQ2ckJtUt6J9RY32GFNa6Q..';

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "maxzoom": 18,
                "minzoom": 2,
            }]
        },
        center: [-73.9, 40.74],
        zoom: 11
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');

    if (!window.isLocal) {
        SuperMap.SecurityManager.registerToken(host, token);
    }

    function getQuery() {
        if ($('#query').val() === "") {
            return "";
        }
        var query = [];
        $('#query').val().split(',').map(function (el) {
            query.push(parseFloat(el));
        });
        var sw = new mapboxgl.LngLat(query[0], query[1]);
        var ne = new mapboxgl.LngLat(query[2], query[3]);

        return new mapboxgl.LngLatBounds(sw, ne);
    }

    $('#btn').on('click', function () {
        if ($('#msg_container')[0]) {
            $('#msg_container').remove();
        }
        showLoader();
        if (map && map.getLayer("kernerlData")) {
            map.removeLayer("kernerlData");
            map.removeSource("kernerlData");
        }
        var kernelDensityJobParameter = new SuperMap.KernelDensityJobParameter({
            datasetName: $('#datasetName').val(),
            resolution: $('#resolution').val(),
            method: $('#method option:selected').attr('value'),
            meshType: $('#meshType option:selected').attr('value'),
            fields: $('#fields').val(),
            query: getQuery(),
            radius: $('#radius').val(),
            meshSizeUnit: $('#meshSizeUnit option:selected').attr('value'),
            radiusUnit: $('#radiusUnit option:selected').attr('value'),
            areaUnit: $('#areaUnit option:selected').attr('value'),
        });

        new mapboxgl.supermap.ProcessingService(processingUrl).addKernelDensityJob(kernelDensityJobParameter, function (serviceResult) {
            if (serviceResult.error) {
                removeLoader();
                var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
                showAlert("创建失败!<br>" + errorMsg, false);
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path + "/zxyTileImage.png?z={z}&x={x}&y={y}&width=256&height=256&transparent=true";
                        map.addSource("kernerlData", {
                            "type": "raster",
                            "tiles": [mapUrl],
                            "tileSize": 256
                        });
                        map.addLayer({
                            "id": "kernerlLayer",
                            "type": "raster",
                            "source": "kernerlData",
                            "minzoom": 0,
                            "maxzoom": 22
                        });

                        removeLoader();
                    });
                }
            });
        });

        function showAlert(msg, state) {
            var className = "alert-";
            className += state ? "success" : "danger";
            if (!$('#msg_container')[0]) {
                var alertDiv = $("<div class='alert alert-dismissible' id='msg_container' role='alert' " +
                    "style='z-index:800;position: absolute;top: 20px;margin:auto;left: 40%;width:400px;display: none'>" +
                    "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                    "<strong><p id='msg' style='word-wrap: break-word'></p></strong></div>");
                $('body').append(alertDiv)
            }
            $('#msg_container').addClass(className);
            $('#msg_container').slideDown(300);
            $('#msg').html(msg);
        }
    });
</script>
</body>
</html>